<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>模拟一个数据监测</title>
    <script type="text/javascript">
        let data = {
            name: '尚硅谷',
            address: '北京'
        };

        let tmp = '尚硅谷';
        setInterval(() => {
            if (data.name !== tmp) {
                tmp = data.name;
                console.log('name被改了');
            }
        }, 100);
        //我的实现
        let data2 = {};
        Object.defineProperty(data2, 'name', {
            get() {
                return data.name;
            },
            set(val) {
                console.log('name被改了');
                data.name = val;
            }
        });

        //老师教课的实现
        //创建一个监视对象,用于监视data中属性的变化
        const obs = new Observer(data);

        //准备一个vm实例对象
        let vm = {};
        vm._data = data = obs;

        function Observer(obj) {
            //汇总对象中所有的属性行程一个数组
            const keys = Object.keys(obj);
            //遍历
            keys.forEach((k) => {
                console.log(this);
                Object.defineProperty(this, k, {
                    get() {
                        return obj[k];
                    },
                    set(val) {
                        console.log(`${k}被改了,我要去解析模板,生成虚拟DOM......我要开始忙了`);
                        obj[k] = val;
                    }
                })
            });
        }



    </script>
</head>

<body>

</body>


</html>